<template>
    <div class="bg-gradient-to-br from-green-100 to-green-200 min-h-screen">
      <!-- 页面标题 -->
      <div class="bg-gradient-to-br from-green-600 to-green-700 text-white py-24 text-center relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-green-600 to-green-700 opacity-70 blur-xl"></div>
        <div class="relative z-10">
          <h1 class="text-5xl font-bold animate-fade-in-down">我们的服务</h1>
          <p class="text-xl mt-4 animate-fade-in-down delay-100">探索我们为您提供的多样化服务</p>
        </div>
      </div>
  
      <!-- 服务介绍 -->
      <div class="container mx-auto py-16 px-4">
        <h2 class="text-3xl font-bold text-center text-green-600 animate-fade-in-down">主要服务</h2>
        <div class="flex flex-wrap justify-center gap-8 mt-8">
          <div
            v-for="(service, index) in services"
            :key="service.title"
            class="bg-white p-6 rounded-3xl shadow-xl transform hover:scale-105 transition-transform duration-300 animate-fade-in-up"
            :class="{ 'delay-100': index === 1, 'delay-200': index === 2, 'delay-300': index === 3 }"
          >
            <div class="flex justify-center">
              <i :class="service.icon" class="text-5xl text-green-600 mb-4"></i>
            </div>
            <h3 class="text-2xl font-bold text-center text-green-600">{{ service.title }}</h3>
            <p class="text-gray-700 mt-4 text-center">{{ service.description }}</p>
          </div>
        </div>
      </div>
  
      <!-- 服务优势 -->
      <div class="bg-white py-16">
        <div class="container mx-auto px-4">
          <h2 class="text-3xl font-bold text-center text-green-600 animate-fade-in-down">服务优势</h2>
          <div class="flex flex-wrap justify-center gap-8 mt-8">
            <div
              v-for="(advantage, index) in serviceAdvantages"
              :key="advantage.title"
              class="bg-green-100 p-6 rounded-3xl shadow-lg w-full md:w-1/2 lg:w-1/3 transform hover:scale-105 transition-transform duration-300"
              :class="{
                'animate-fade-in-left': index % 2 === 0,
                'animate-fade-in-right': index % 2 === 1
              }"
            >
              <h3 class="text-2xl font-bold text-green-600 text-center">{{ advantage.title }}</h3>
              <p class="text-gray-700 mt-4 text-center">{{ advantage.description }}</p>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 客户案例 -->
      <div class="container mx-auto py-16 px-4">
        <h2 class="text-3xl font-bold text-center text-green-600 animate-fade-in-down">客户案例</h2>
        <div class="flex flex-wrap justify-center gap-8 mt-8">
          <div
            v-for="(caseItem, index) in customerCases"
            :key="caseItem.title"
            class="bg-white p-6 rounded-3xl shadow-xl w-full md:w-1/2 transform hover:scale-105 transition-transform duration-300 animate-fade-in-up"
            :class="{ 'delay-100': index === 1, 'delay-200': index === 2 }"
          >
            <h3 class="text-2xl font-bold text-green-600 text-center">{{ caseItem.title }}</h3>
            <p class="text-gray-700 mt-4 text-center">{{ caseItem.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, ref } from 'vue';
  
  const services = ref([
    {
      title: '软件开发',
      description: '我们提供定制化的软件开发服务，满足您的特定业务需求。',
      icon: 'fa-solid fa-code'
    },
    {
      title: '数据分析',
      description: '通过专业的数据分析，为您提供有价值的业务洞察。',
      icon: 'fa-solid fa-chart-bar'
    },
    {
      title: '云计算服务',
      description: '利用云计算技术，帮助您实现高效的资源管理和部署。',
      icon: 'fa-solid fa-cloud'
    }
  ]);
  
  const serviceAdvantages = ref([
    {
      title: '专业团队',
      description: '我们拥有一支经验丰富、专业技能过硬的团队，他们致力于为您提供最优质的服务。'
    },
    {
      title: '创新技术',
      description: '我们不断投入研发，采用最新的技术和方法，确保服务的高效性和创新性。'
    }
  ]);
  
  const customerCases = ref([
    {
      title: '案例一：[公司名称 1]',
      description: '我们为 [公司名称 1] 提供了 [具体服务内容 1]，帮助他们解决了 [具体问题 1]，实现了 [具体成果 1]。'
    },
    {
      title: '案例二：[公司名称 2]',
      description: '针对 [公司名称 2] 的需求，我们定制了 [具体服务内容 2]，显著提升了他们的 [具体业务指标 2]。'
    }
  ]);
  
  onMounted(() => {
    // 可以在这里添加更多的初始化逻辑
  });
  </script>
  
  <style scoped>
  /* 动画关键帧 */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fade-in-left {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes fade-in-right {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* 动画类 */
  .animate-fade-in-down {
    animation: fade-in-down 0.5s ease-out forwards;
  }
  
  .animate-fade-in-left {
    animation: fade-in-left 0.5s ease-out forwards;
  }
  
  .animate-fade-in-right {
    animation: fade-in-right 0.5s ease-out forwards;
  }
  
  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
  }
  
  /* 延迟动画 */
  .delay-100 {
    animation-delay: 0.1s;
  }
  
  .delay-200 {
    animation-delay: 0.2s;
  }
  
  .delay-300 {
    animation-delay: 0.3s;
  }
  </style>    